<template>
  <view class="content">
    <view class="section">
      <view class="section-body">
        <view class="section-0">
          <view class="wrapper">
            <view class="label">变更名称</view>
            <view class="value">
              <view class="input-2">
                <u--input
                  placeholderClass="input-placeholder"
                  class="input-body"
                  placeholder="请填写变更名称"
                  v-model="form.company_name"
                ></u--input>
              </view>
            </view>
          </view>
        </view>
        <view class="section-0">
          <view class="wrapper">
            <view class="label">变更内容</view>
            <view class="value">
              <view class="input-2">
                <u--input
                  placeholderClass="input-placeholder"
                  class="input-body"
                  placeholder="请填写变更内容"
                  v-model="form.duty_user_name"
                ></u--input>
              </view>
            </view>
          </view>
        </view>

        <view class="section-0">
          <view class="wrapper">
            <view class="label">变更金额</view>
            <view class="value">
              <view class="input-2">
                <u--input
                  placeholderClass="input-placeholder"
                  class="input-body"
                  placeholder="请填写变更金额"
                  v-model="form.duty_user_name"
                ></u--input>
              </view>
            </view>
          </view>
        </view>
        <view class="section-0">
          <view class="wrapper">
            <view class="label">变更时间</view>
            <view class="value">
              <view class="date" @click="show = true">
                <view class="input-body">{{ form.sub_time }}</view>
                <view class="iconfont icon-rili"></view>
              </view>
            </view>
          </view>
        </view>

        <view class="section-0">
          <view class="wrapper">
            <view class="label">发起单位</view>
            <view class="value">
              <view class="input-2">
                <u--input
                  placeholderClass="input-placeholder"
                  class="input-body"
                  placeholder="请填写发起单位"
                  v-model="form.duty_user_name"
                ></u--input>
              </view>
            </view>
          </view>
        </view>

        <view class="section-0">
          <view class="wrapper">
            <view class="title">附件
            </view>
           <view class="text"> 请至PC端上传附件 </view>
          </view>
        </view>
      </view>
    </view>

    <view class="preservation">
      <u-button
        class="preservabtn"
        type="primary"
        text="保存"
        @click="submit"
      ></u-button>
    </view>
    <u-datetime-picker
      @cancel="cancleTime"
      @confirm="getTime"
      :show="show"
      v-model="valTime"
      mode="date"
    >
    </u-datetime-picker>
  </view>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
import { zhengchuAddApi, infoApi, updateApi } from "@/api/zhengchu.js";
import { uploadUrl } from "@/baseUrl.js";
export default {
  data() {
    return {
      show: false,
      fileList: [],
      valTime: Number(new Date()),
      id: 0,
      form: {
        company_name: "",
        duty_user_id: "",
        duty_user_name: "",
        sub_time: "",
        content: "",
        file_id: "",
      },
    };
  },
  computed: {
    ...mapGetters({
      curProject: "system/getCurProject",
    }),
  },
  methods: {
    // 删除图片
    deletePic(event) {
      this[`fileList`].splice(event.index, 1);
      this.form.file_id = "";
    },
    // 新增图片
    async afterRead(event) {
      // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file);
      let fileListLen = this[`fileList`].length;
      lists.map((item) => {
        this[`fileList`].push({
          ...item,
          status: "uploading",
          message: "上传中",
        });
      });
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url);
        this.form.file_id = result.data.file_id;
        let item = this[`fileList`][fileListLen];
        this[`fileList`].splice(
          fileListLen,
          1,
          Object.assign(item, {
            status: "success",
            message: "",
            url: result.data.file_id,
            file_path: result.data.file_path,
          })
        );
        fileListLen++;
      }
    },
    uploadFilePromise(url) {
      return new Promise((resolve, reject) => {
        let a = uni.uploadFile({
          url: uploadUrl, // 仅为示例，非真实的接口地址
          filePath: url,
          name: "file",
          formData: {
            user: "test",
          },
          success: (res) => {
            setTimeout(() => {
              resolve(JSON.parse(res.data));
            }, 1000);
          },
        });
      });
    },
    formatDate(timeStamp) {
      const date = new Date(timeStamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      const Y = date.getFullYear() + "-";
      const M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      const D =
        date.getDate() < 10 ? "0" + date.getDate() + " " : date.getDate() + " ";
      return Y + M + D;
    },
    cancleTime() {
      this.show = false;
    },
    getTime(e) {
      console.log(e);
      const timeStamp = e.value;
      this.form.sub_time = this.formatDate(timeStamp);
      this.show = false;
    },
    //提交
    async submit(res) {
      //添加按钮  点击确定
      if (this.id) {
        let obj = this.form;
        delete obj.file_name;
        delete obj.file_path;
        const { data } = await updateApi({
          project_id: this.curProject.id,
          ...this.form,
        });
        console.log(data);
        if (data.code == 1) {
          uni.showToast({ title: "修改成功", duration: 1000, icon: "success" });
          setTimeout(() => {
            uni.navigateBack();
          }, 1000);
        } else {
          uni.showToast({ title: "修改失败", duration: 1000, icon: "error" });
        }
      } else {
        const { data } = await zhengchuAddApi({
          project_id: this.curProject.id,
          ...this.form,
        });
        if (data.code == 1) {
          uni.showToast({ title: "添加成功", duration: 1000, icon: "success" });
          setTimeout(() => {
            uni.navigateBack();
          }, 1000);
        } else {
          uni.showToast({ title: "添加失败", duration: 1000, icon: "error" });
        }
      }
    },
  },
  onLoad(data) {
    //编辑过来使用添加的页面修改标题
    if (data.id) {
      uni.setNavigationBarTitle({
        title: "问题修改",
      });
    }
    this.id = data.id;
    if (data.id) {
      infoApi({
        id: this.id,
      }).then((res) => {
        this.form = res.data.data;
        if (res.data.data.file_path) {
          this.fileList = [
            {
              url: res.data.data.file_path,
            },
          ];
        }
      });
    }
  },
};
</script>

<style lang="scss" scoped>
.section {
  width: 100%;
  background: #2e5efe;

  .section-body {
    padding-top: 40rpx;
    width: 100%;
    height: 100%;
    border-top-left-radius: 50rpx;
    border-top-right-radius: 50rpx;
    background-color: #fff;
    overflow: hidden;
  }

  .section-0 {
    margin-bottom: 24rpx;
    background-color: #fff;
  }

  .wrapper {
    width: 670rpx;
    margin-left: 40rpx;
    border-radius: 35rpx;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
    box-sizing: border-box;
    box-shadow: 0 0 20rpx 10rpx rgba(#bcbcb5, 0.17);
    padding: 28rpx 40rpx;

    .label {
      width: 135rpx;
      float: left;
      font-size: 26rpx;
      font-weight: bold;
      font-stretch: normal;
      height: 48rpx;
      line-height: 48rpx;
      letter-spacing: 0px;
      color: #46464a;
    }

    .title {
      width: 94rpx;
      float: left;
      font-size: 26rpx;
      font-weight: bold;
      font-stretch: normal;
      height: 48rpx;
      line-height: 48rpx;
      letter-spacing: 0px;
      color: #46464a;
      margin-left: 48rpx;
    }

    .text {
      width: 500rpx;
      font-size: 26rpx;
      height: 48rpx;
      line-height: 48rpx;
      color: #c0c4cc;
      text-align-last: left;
    }
    .value {
      float: left;
      width: 445rpx;

      .input-2 {
        width: 100%;
        height: 52rpx;
        border-radius: 20rpx;
        border: solid 2rpx #0535d6;
        line-height: 52rpx;
        position: relative;
        font-size: 26rpx;
        color: rgba(0, 0, 0, 0.7);

        box-sizing: border-box;
        // padding-left: 20rpx;
        text-align: center;
        color: #0535d6;
        padding-right: 50rpx;

        .input-body {
          box-sizing: border-box;
          width: 100%;
          height: 44rpx;
          padding: 0 !important;
          border: none;
          padding-left: 30rpx !important;
          padding-right: 30rpx !important;
          font-size: 26rpx;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0rpx;
          color: rgba(0, 0, 0, 0.7);
        }

        .iconfont {
          top: 0;
          position: absolute;
          right: 25rpx;
          line-height: 50rpx;
          color: #1534ce;
          font-size: 28rpx;
        }

        .input-placeholder {
          font-size: 26rpx;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0rpx;
          color: rgba(0, 0, 0, 0.5);
        }
      }

      .audio {
        width: 50rpx;
        height: 50rpx;
        background-color: #ffffff;
        border-radius: 50%;
        box-shadow: 0 0 20rpx 10rpx rgba(#bcbcb5, 0.17);
        overflow: hidden;

        float: left;

        .audio-center {
          margin-top: 13rpx;
          margin-left: 13rpx;
          border-radius: 50%;
          width: 24rpx;
          height: 24rpx;
          background-color: #ed451b;
        }

        .audio-center__on {
          animation: scale 2s infinite;
        }

        .audio-center__fin {
          background-color: rgba(0, 0, 0, 0.5);
        }

        @keyframes scale {
          0% {
            transform: scale(1);
            opacity: 1;
          }

          50% {
            transform: scale(1.5);
            opacity: 0.5;
          }

          100% {
            transform: scale(1);
            opacity: 1;
          }
        }
      }

      .fin-tips {
        height: 50rpx;
        line-height: 50rpx;
        font-size: 22rpx;
        color: rgba(0, 0, 0, 0.5);
        float: left;
        margin-left: 20rpx;
      }

      .time {
        position: absolute;
        right: 100rpx;
      }

      .upload-wrap {
        width: 100%;
        min-height: 48rpx;
        border-radius: 20rpx;
        position: relative;

        .file_name {
          padding: 9rpx 0;
          line-height: 30rpx;
          color: #1534ce;
          font-size: 26rpx;
          word-break: break-all;
        }

        .iconfont {
          position: absolute;
          right: 25rpx;
          line-height: 48rpx;
          color: #1534ce;
          font-size: 28rpx;
          top: 2rpx;
        }
      }

      .date {
        width: 100%;
        height: 52rpx;
        border-radius: 20rpx;
        border: solid 2rpx #0535d6;
        line-height: 48rpx;
        position: relative;
        font-size: 26rpx;
        color: rgba(0, 0, 0, 0.7);
        box-sizing: border-box;
        // padding-left: 20rpx;
        text-align: center;
        color: #0535d6;
        padding-right: 50rpx;

        .iconfont {
          position: absolute;
          right: 25rpx;
          top: 0rpx;
          font-size: 30rpx;
          color: #0535d6;
        }
      }

      .picker {
        width: 100%;
        height: 48rpx;
        border-radius: 20rpx;
        border: solid 2rpx #0535d6;
        line-height: 44rpx;

        text {
          font-size: 26rpx;
          letter-spacing: 0rpx;
          color: #46464a;
          margin-left: 28rpx;
        }

        .iconfont {
          float: right;
          font-size: 32rpx;
        }
      }

      .input {
        padding-top: 18rpx;

        .input-body {
          box-sizing: border-box;
          width: 100%;
          height: 44rpx;
          padding: 0 !important;
          border: none;
          line-height: 44rpx;
          font-size: 26rpx;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0rpx;
          color: rgba(0, 0, 0, 0.7);
        }

        .input-placeholder {
          font-size: 26rpx;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0rpx;
          color: rgba(0, 0, 0, 0.5);
        }
      }

      .textarea {
        width: 100%;
        height: 200rpx;
        line-height: 30rpx;
        .textarea-body {
          box-sizing: border-box;
          width: 100%;
          height: 200rpx;
          border: none;
          padding: 18rpx 0rpx !important;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0rpx;
          /deep/ .u-textarea__field {
            height: auto !important;
            font-size: 25rpx;
          }
        }

        /deep/ .u-textarea--disabled {
          background-color: #fff;
        }

        .textarea-placeholder {
          font-size: 25rpx;
          font-weight: normal;
          font-stretch: normal;
          line-height: 50rpx;
          letter-spacing: 3rpx;
          color: rgba(0, 0, 0, 0.5);
        }
      }
    }

    .l-value {
      width: 100%;
    }
  }
}
.preservation {
  width: 100%;
  height: 115rpx;
  position: fixed;
  bottom: 0rpx;
  right: 0;
  padding-top: 21rpx;
  box-shadow: 0 0 10rpx 10rpx rgba(#bcbcb5, 0.17);
  .preservabtn {
    width: 75%;
    margin: auto;
  }
}
</style>
